<script type="text/javascript">
function EventAlbumCreateController(albumId, albumName, albumDescription) {
	
	var noPhotosAvailable = jQuery('#noPhotosAvailable');
	var unselectedPhotosContainer = jQuery('#allPhotosContainer');	
	var selectedPhotosContainer = jQuery('#gallery');
	var imagePreviewContainer = jQuery('#preview-image');
	var coverPhotoImage = jQuery('#coverPhotoImage');
	var hiddenCoverId = jQuery('#hidden_cover_id');
	var hiddenSelectedPhotos = jQuery('#hidden_selected_photos_ids');
	
	var UNSELECTED_PREFIX = "Unselected";
	var SELECTED_PREFIX = "Selected";		
	
	var GRID_PHOTO_CONTAINER= "gridPhotoContainer";
	var GRID_PHOTO_CONTAINER_CLASS= "."+GRID_PHOTO_CONTAINER;	
	
	var albumEntity = new Album(albumId, albumName, albumDescription);
	var _eventName = "${eventAlbumInstance?.event?.name}";			
		
	this.loadUnselectedPhotos = loadUnselectedPhotos;
	this.loadSelectedPhotos = loadSelectedPhotos;	
	this.addPhotoToUnselectedPhotos = addPhotoToUnselectedPhotos;
	this.setHiddenFields = setHiddenFields;
	this.addAllToAlbum = addAllToAlbum;
	this.getUnselectedIdFirstImage = getUnselectedIdFirstImage;
		

	function loadSelectedPhotos(photosJSONList){		
		jQuery.each(photosJSONList, function()  {								
			var photoEntity = new Photo(this.photoId,this.url,undefined,this.thumbnailUrl,this.thumbnailMediumUrl, this.inCart);
			addPhotoToAlbum(photoEntity);			
		});		
		
	}
	
	function loadUnselectedPhotos(photosJSONList){				
		jQuery.each(photosJSONList, function()  {			
			var photoJSON = this; 			
			var photoEntity = new Photo(photoJSON.photoId,photoJSON.url,undefined,photoJSON.thumbnailUrl,photoJSON.thumbnailMediumUrl);
			addPhotoToUnselectedPhotos(photoEntity);							
		});
		
		imagePreview();
	}
	
	
	
	function addPhotoToUnselectedPhotos(photoEntity){
		
		photoEntity.setElementName(UNSELECTED_PREFIX+photoEntity.getId());
		
		albumEntity.addPhotoToUnselectedPhotos(photoEntity);
													
		var aPhotoContainer = jQuery('<div id="'+photoEntity.getElementName()+'" class="'+GRID_PHOTO_CONTAINER+'" />'); 			  
		var galleryRef = jQuery('<a class="preview" />');		
									
		var image = jQuery('<img class="gridPhotoImage" >');		
		image.prop('src',photoEntity.getThumbnailUrl());			
		
		image.click(function (event) {		
			//Hace que no se redireccione a la imagen.
			event.preventDefault();
			
			var selectedElement = jQuery(this).parent().parent();
			var selectedElementName = selectedElement.prop('id');			
			var selectedPhoto = albumEntity.getPhotoEntityByElementName(selectedElementName);					
			selectedElement.remove();
			
			jQuery('#preview-image').remove();
			
			
			addPhotoToAlbum(selectedPhoto);
			
			showHideAvailableUnselectedPhotos();
	    });
				
		galleryRef.append(image);				
		galleryRef.prop('href', photoEntity.getUrl())						  				

		aPhotoContainer.append(galleryRef);
		aPhotoContainer.appendTo(unselectedPhotosContainer);
		
		showHideAvailableUnselectedPhotos();
	}
	
	// Si no quedaron fotos seleccionadas se activa el No hay fotos disponibles
	function showHideAvailableUnselectedPhotos() {
		var unselectedPhotosContainers = jQuery('#allPhotosContainer > .gridPhotoContainer');
		
		if (unselectedPhotosContainers.length === 0)
			noPhotosAvailable.show();
		else
			noPhotosAvailable.hide();
	}	
	
	/* La estructura que arma es de la siguiente forma 
	<div id={elementName} class="gridMediumImageContainer span3" >																																			
		<a rel="gallery" href={fotoEntera}>
			<img class="gridMediumImage" src={fotoTamañoMedio} />								
		</a>
		<div class="gridMediumImageBottom albumEditableContainer" >									
		 	<div class="gridMediumImageBottomButton deleteImageBackground" />
		 	<div class="gridMediumImageBottomButton coverImageBackground" />
		</div> 		
	</div>			
	 */
	function addPhotoToAlbum(photoEntity){						
		
		photoEntity.setElementName(SELECTED_PREFIX+photoEntity.getId())		
		
		//Agrego la entidad a la lista de fotos.
		albumEntity.addPhotoToAlbum(photoEntity);					
		
		var container = jQuery('<div id="'+photoEntity.getElementName()+'" class="span3 gridElement" />');
		
		var aPhotoContainer = jQuery('<div class="gridImage" />');
		var aPhotoContainerFooter = jQuery('<div/>');
		
		var galleryRef = jQuery('<a rel="gallery" href="'+photoEntity.getUrl()+'" />');
		var image = jQuery('<img class="gridMediumImage img-rounded" src="'+photoEntity.getThumbnailMediumUrl()+'" />');
		//Agrego la imagen a la gallery.
		galleryRef.append(image);
		
		
		//Agrego los botones al footer
		var deleteImageButton = jQuery('<div class=" gridBottomButton deleteImageBackground" />');
		var coverImageButton = jQuery('<div class=" gridBottomButton coverImageBackground" />');
				
		//Se inicializan en este estado de visibilidad
		deleteImageButton.show();
		coverImageButton.show();
						
		aPhotoContainerFooter.append(deleteImageButton);
		aPhotoContainerFooter.append(coverImageButton);
		
		
		//Cuando intenta eliminar, vuelve al listado de fotos disponibles. 
		deleteImageButton.click(function (event) {		
			
			var selectedElement = jQuery(this).parent().parent();
			var selectedElementName = selectedElement.prop('id');			
			var selectedPhoto = albumEntity.getPhotoEntityByElementName(selectedElementName);
			
			//Si borro la foto que es el cover, se queda en nulo el cover.
			if( selectedPhoto.getId() == coverPhotoImage.attr('name')){
				setNullCover();
			};
			
			selectedPhoto.setElementName(UNSELECTED_PREFIX+selectedPhoto.getId());			
			selectedElement.remove();															
			
			addPhotoToUnselectedPhotos(selectedPhoto);	
			imagePreview();
	    });
		
		coverImageButton.click(function (event) {					
			var selectedElement = jQuery(this).parent().parent();
			var selectedElementName = selectedElement.prop('id');			
			var selectedPhoto = albumEntity.getPhotoEntityByElementName(selectedElementName);			
			// cambio la imagen de la cover foto
			coverPhotoImage.attr('src',selectedPhoto.getUrl());			
			coverPhotoImage.attr('name',selectedPhoto.getId());
			
	    });						
		
		aPhotoContainer.append(galleryRef);
		container.append(aPhotoContainer)		
		container.append(aPhotoContainerFooter);
					
		container.appendTo(selectedPhotosContainer);		
	}
	
	function addAllToAlbum(){
		unselectedPhotosContainer.empty();
		var unselectedPhotos = albumEntity.getEventUnselectedPhotos(); 
		var amountPhotos = unselectedPhotos.length;
						
		//TOOD muy fea forma de iterar. Pero cada vez que se llama al metodo 
		//se modifica el array porque se elimina la foto. 
		for( i = 0; i<amountPhotos ; i++){			
			addPhotoToAlbum(unselectedPhotos[0]);
		}
				
		showHideAvailableUnselectedPhotos();
	}
	
	function setNullCover(){
		coverPhotoImage.attr('src',"${resource(dir:'images', file: 'defaultImage.jpg')}");
		coverPhotoImage.attr('name',"0");
	}
		
	function setHiddenFields(){		
		hiddenSelectedPhotos.val(albumEntity.getSelectedPhotosIds());							
		hiddenCoverId.val(coverPhotoImage.attr('name'));
	}	
	
	//Establece un id y devuelve a la primer foto no seleccionada.
	function getUnselectedIdFirstImage(){
		var firstImage = unselectedPhotosContainer.find(GRID_PHOTO_CONTAINER_CLASS).first();		  			
		return firstImage.prop('id');
	}
	
}
</script>